<template>
  <!-- index name-->
  <Card class="formCard">
    <div class="el-card__header" style="padding-top: 10px">
      <div class="clearfix">
        <span style="font-weight: bold;">品质报告</span> <span>(品质年月: 2021年01月)</span>
        <el-button type="primary" style="float: right;" size="mini">下载为图片
        </el-button>
      </div>
    </div>

    <div class="flex-con base-info">
      <div class="info-item" style="justify-content: center;padding-top: 0;color:#FFA041;font-weight: bold;">小雨伞</div>
      <div class="info-item">
        <div class="bor-left-right" style="left: 0;"></div>
        <span style="color: #9F9F9F;">排名</span>
        <div>
          <span>1</span>
          <sub style="color: #9F9F9F;">/100</sub>
        </div>
      </div>
      <div class="info-item">
        <div class="bor-left-right" style="right: 0;"></div>
        <span>综合得分</span>
        <div class="cil-div">99</div>
      </div>
      <div class="info-item">
        <span>品质等级</span>
        <div style="color: #9F9F9F;">AAA</div>
      </div>
    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="品质得分" name="1">
        <el-table :data="tableList" :span-method="arraySpanMethod" style="width: 100%;">
          <el-table-column label="综合得分" align="center" prop="aaa" class-name="col-0" />
          <el-table-column label="量化类型" align="center" prop="bbb" />
          <el-table-column label="13个月年度累计继续率" align="center" prop="eee" min-width="170" />
          <el-table-column label="25个月年度察计继续率" align="center" prop="fff" min-width="170" />
          <el-table-column label="当月二次累计保费进度率" align="center" prop="ggg" width="200" />
          <el-table-column label="交办处理时效" align="center" prop="hhh" width="130" />
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div class="warning-box">
      <i class="el-icon-warning" style="color: red;"></i>
      调整情况
    </div>
    <el-table :data="revisionList" style="width: 100%;">
      <el-table-column label="品质等级" align="center" prop="aaa" class-name="col-detail-0" />
      <el-table-column label="调整情况" align="center" prop="bbb" />
      <el-table-column label="品质年月" align="center" prop="ccc" />
      <el-table-column label="记录人" align="center" prop="ddd" />
      <el-table-column label="品质类型" align="center" prop="eee" />
      <el-table-column label="详情" align="center" prop="fff" width="200" />
    </el-table>

    <el-tabs v-model="activeName" style="margin-top: 10px;">
      <el-tab-pane label="品质明细" name="1">
        <div class="flex-con odd-cla" style="">
          <div v-for="(item, index) in detailList" :key="index" class="flex-item flex-con"
            style="flex-direction: column;align-items: flex-start;">
            <div>{{ item.aaa }}</div>
            <div class="flex-con" style="width: 100%;">
              <div style="text-align: center;">
                <span>应收</span>
                <div style="margin-top: 15px;">{{ item.bbb }}<span style="color: #AEAEAE; font-size: 10px;">万元</span>
                </div>
              </div>
              <div style="text-align: center;">
                <span>实收</span>
                <div style="margin-top: 15px;">{{ item.ccc }}<span style="color: #AEAEAE; font-size: 10px;">万元</span>
                </div>
              </div>
              <div style="color: #FD6646;font-size: 16px;">{{ item.ddd }}</div>
            </div>
          </div>

          <div class="flex-item flex-con" style="flex-direction: column;align-items: flex-start;">
            <div>{{ lastObj.aaa }}</div>
            <div class="flex-con" style="width: 100%;">
              <div style="text-align: center;">
                <span>交办件数</span>
                <div style="margin-top: 15px;">{{ lastObj.bbb }}<span
                    style="color: #AEAEAE; font-size: 10px;margin-left: 3px;">件</span>
                </div>
              </div>
              <div style="text-align: center;">
                <span>超时回复件数</span>
                <div style="margin-top: 15px;">{{ lastObj.ccc }}<span
                    style="color: #AEAEAE; font-size: 10px;margin-left: 3px;">件</span>
                </div>
              </div>
              <div style="text-align: center;">
                <span>平均处理时效</span>
                <div style="margin-top: 15px;">{{ lastObj.ddd }}<span
                    style="color: #AEAEAE; font-size: 10px;margin-left: 3px;">h</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div></div> -->
      </el-tab-pane>
    </el-tabs>
  </Card>
</template>
<script>
export default {
  data() {
    return {
      activeName: '1',
      tableList: [{
        aaa: '99分', bbb: '指标', ccc: '67.22',
        ddd: '42.32', eee: '91%', fff: '96%',
        ggg: '56%', hhh: '9h',
      }, {
        aaa: '', bbb: '权重', ccc: '73.22',
        ddd: '0.00', eee: '94%', fff: '92%',
        ggg: '76%', hhh: '94%',
      }, {
        aaa: '', bbb: '得分', ccc: '45.22',
        ddd: '0.00', eee: '91%', fff: '75%',
        ggg: '66%', hhh: '30分',
      },],
      revisionList: [{
        aaa: 'AAA -> AA', bbb: '降级(降1级)', ccc: '2021-01',
        ddd: '张三', eee: '销售误导', fff: '这是具体的描述',
      }],
      detailList: [{
        aaa: '13个月年度累计继续率', bbb: '249,99', ccc: '249,99',
        ddd: '99.39%',
      }, {
        aaa: '25个月年度累计继续率', bbb: '249,99', ccc: '249,99',
        ddd: '99.39%',
      }, {
        aaa: '当月二次累计保费进度率', bbb: '249,99', ccc: '249,99',
        ddd: '99.39%',
      },],
      lastObj: {
        aaa: '交办件', bbb: '24', ccc: '2',
        ddd: '2',
      },
    }
  },
  methods: {
    arraySpanMethod(opts) {
      if (opts.columnIndex == 0) {
        if (opts.rowIndex == 0) return [this.tableList.length, 1]
        else return [0, 0]
      }
    },
  }
}
</script>

<style lang="less">
.col-0 {
  background-color: #E7F4FF;
  color: #54ACFF;
  font-weight: 800;
}

.col-detail-0 {
  font-weight: bold;
}
</style>
<style lang="less" scoped>
.warning-box {
  margin: 10px 0;
  border: 2px solid #FBC0B6;
  background-color: #F8D3D3;
  padding: 5px 10px;
}

.flex-item {
  width: 24%;
  height: 140px;
  margin-top: 10px;
  margin-right: 1.33%;
  padding: 15px;
  border-radius: 5px;
  background-color: #F3F3F3;
  font-weight: bold;
}

.flex-con {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.odd-cla {
  flex-wrap: wrap;
  justify-content: start;
}

.flex-item:nth-child(4n) {
  margin-right: 0;
}


.base-info {
  width: 50%;

  // padding: ;
  .info-item {
    position: relative;
    flex: 1;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 30px;
    // border: 1px solid red;

    .bor-left-right {
      position: absolute;
      border: 1px solid #F5F5F5;
      height: 40%;
    }
  }
}

.cil-div {
  color: #fff;
  background-color: #FFC300;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
}
</style>